<template>
  <div class="projected">
    <div class="headers">
      <span>项目分类</span>
      <el-dropdown>
  <el-button type="primary" size="mini">
    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </el-button>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>黄金糕</el-dropdown-item>
    <el-dropdown-item>狮子头</el-dropdown-item>
    <el-dropdown-item>螺蛳粉</el-dropdown-item>
    <el-dropdown-item>双皮奶</el-dropdown-item>
    <el-dropdown-item>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

      <span>项目名称</span>
      <el-input v-model="input" placeholder="请输入项目名称"></el-input>

       <el-button type="primary" size="mini"><i class="el-icon-search"></i></el-button>
       <el-button type="primary" size="mini">添加</el-button>
      
    </div>
    <el-table :data="tableData" style="width: 100%" >
      <el-table-column label="序号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目分类" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单位" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.rem }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单价（元）" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="治疗科室" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.keshi }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
          <el-button size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      tableData: [
        {
          id:0,
          type: "疫苗类",
          name:"胃疼",
          rm:'',
          price:700,
          keshi:'诊断'
        },
        {
          id:1,
          type: "疫苗类",
          name:"胃疼",
          rm:'',
          price:700,
          keshi:'诊断'
        },
        {
          id:2,
          type: "疫苗类",
          name:"胃疼",
          rm:'',
          price:700,
          keshi:'诊断'
        },
        {
          id:3,
          type: "疫苗类",
          name:"胃疼",
          rm:'',
          price:700,
          keshi:'诊断'
        },
      ],
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
};
</script>
<style>
  .headers{
    display: flex;
    align-items: center;
    background: #fff;
    padding: 0.05rem;
    margin-top:0.01rem;
  }
  .headers span{
    width: 0.12rem;
  }
  .el-input{
    width: 0.5rem;
    margin-right: 0.02rem;
  }
  .el-button{
    margin-right: 0.02rem;
  }
</style>